<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
            register
        </title>
        <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
        <link type="text/css" href="css/register.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
			
    </head>
    <body>
        <header id="header">
        	<img src="img/loginjpg.jpg" width="20%" >
        	<div class="a1"></div>
        	<span class="a2">用户注册</span><br>
        	
        </header>
        <div id="center">
            <form name="myform" onsubmit="return keyizhuce()" enctype="multipart/form-data" action="/doSaveUser" method="post" id="myform">
                <div class="input-group">
                    <h3 style="font-family: 楷体">
                        用&nbsp;户&nbsp;名：
                    </h3>
					<input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字，4-16个字符" autocomplete="off">
                </div>
				<div class="input-group">
				    <h3 style="font-family: 楷体">
				        性&nbsp;&nbsp;&nbsp;&nbsp;名：
				    </h3>
					<input class="form-control"  id="name" name="name" type="text" style="height:40px" value="" placeholder="请输入姓名" autocomplete="off">
				</div>
				<div class="input-group">
				    <h3 style="font-family: 楷体">
				        性&nbsp;&nbsp;&nbsp;&nbsp;别：
				    </h3>
					<label style="padding-top: 5px;">
					<input type="radio" class="gender" name="gender" value="男"/>&nbsp;&nbsp;&nbsp;&nbsp;男
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" class="gender" name="gender" value="女"/>&nbsp;&nbsp;&nbsp;&nbsp;女</label>
				</div> 
				<div class="input-group">
				    <h3 style="font-family: 楷体">
				        电话号码：
				    </h3>
					<input class="form-control" id="tel" name="tel" type="text" style="height:40px" value="" placeholder="输入正确的手机号" autocomplete="off">
				</div>
				
                <div class="input-group">
                    <h3 style="font-family: 楷体">
                        密&nbsp;&nbsp;&nbsp;&nbsp;码：
                    </h3>
					<input class="form-control" id="password" name="password" type="password" style="height:40px" value="" placeholder="密码长度6-12位" autocomplete="off">
					
                </div>
                <div class="input-group">
                    <h3 style="font-family: 楷体">
                        确认密码：
                    </h3>
					<input class="form-control" id="password2" name="password2" type="password" style="height:40px" value="" placeholder="输入相同的密码" autocomplete="off">
					
                </div>
				<div class="input-group">
					<h3 style="font-family: 楷体">
						验&nbsp;证&nbsp;码：
					</h3>
					<input class="form-control" id="text" type="text" style="height:40px" value="" placeholder="输入右边验证码"/>
					<canvas id="canvas" width="120" height="40"></canvas>
				</div>
                <div id="btn">
                     <a >
						<input name="registerButton" class="btn btn-primary" type="submit" id="register" value="注册">
					</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="javascript:doLogin()">
						<input class="btn btn-primary" name="loginButton" id="login" type="button" value="返回登录">
					</a>
                </div>
            </form>
        </div>
		<script language="JavaScript" type="text/javascript">


			$(function (){
				$("#register").click(keyizhuce)

			})

			var canvas = document.getElementById("canvas");//演员
			var context = canvas.getContext("2d");//舞台，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
			var button = document.getElementById("bt");//获取按钮
			var input = document.getElementById("text");//获取输入框
			draw();
			canvas.onclick = function () {
				context.clearRect(0, 0, 120, 40);//在给定的矩形内清除指定的像素
				draw();
			}

			// 随机颜色函数
			function getColor() {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			function draw() {
				context.strokeRect(0, 0, 120, 40);//绘制矩形（无填充）
				var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
				// 绘制字母
				var arr = [] //定义一个数组用来接收产生的随机数
				var num //定义容器接收验证码
				for (var i = 0; i < 4; i++) {
					var x = 20 + i * 20;//每个字母之间间隔20
					var y = 20 + 10 * Math.random();//y轴方向位置为20-30随机
					var index = Math.floor(Math.random() * aCode.length);//随机索引值
					var txt = aCode[index];
					context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
					context.fillStyle=getColor();//设置或返回用于填充绘画的颜色、渐变或模式，随机
					context.translate(x,y);//重新映射画布上的 (0,0) 位置，字母不可以旋转移动，所以移动容器
					var deg=90*Math.random()*Math.PI/180;//0-90度随机旋转
					context.rotate(deg);// 	旋转当前绘图
					context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
					context.rotate(-deg);//将画布旋转回初始状态
					context.translate(-x,-y);//将画布移动回初始状态
					arr[i] = txt //接收产生的随机数
				}
				num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
				// 绘制干扰线条
				for (var i = 0; i < 8; i++) {
					context.beginPath();//起始一条路径，或重置当前路径
					context.moveTo(Math.random() * 120, Math.random() * 40);//把路径移动到画布中的随机点，不创建线条
					context.lineTo(Math.random() * 120, Math.random() * 40);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
					context.strokeStyle=getColor();//随机线条颜色
					context.stroke();// 	绘制已定义的路径
				}
				// 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
				for (var i = 0; i < 20; i++) {
					context.beginPath();
					var x = Math.random() * 120;
					var y = Math.random() * 40;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.strokeStyle=getColor();
					context.stroke();
				}

				//点击按钮验证
				button.onclick = function () {
					var text = input.value //获取输入框的值
					if (text === num) {
						alert('验证通过')
						return true;
					} else
						alert('验证失败')
					return false;

				}

			}

			function checkUserName() { //验证用户名
				var fname = document.myform.username.value;
				var reg = /^[0-9a-zA-Z]/;
				if (fname.length != 0) {
					for (i = 0; i < fname.length; i++) {
						if (!reg.test(fname)) {
							alert("只能输入字母或数字");
							return false;
						}
					}
					if (fname.length < 4 || fname.length > 16) {
						alert("只能输入4-16个字符");
						return false;
					}
				} else {
					alert("请输入用户名");
					document.myform.username.focus();
					return false;
				}
				return true;
			}
			function checkName(){
				var Wname = document.myform.name.value;
				if(Wname==""){
					alert("姓名不能为空")
					document.myform.name.focus();
					return false;
				}
				return true;
			}
			function passCheck() { //验证密码
				var userpass = document.myform.password.value;
				if (userpass == "") {
					alert("未输入密码 \n" + "请输入密码");
					document.myform.password.focus();
					return false;
				}
				if (userpass.length < 6 || userpass.length > 12) {
					alert("密码必须在 6-12 个字符。\n");
					return false;
				}
				return true;
			}

			function passCheck2() {
				var p1 = document.myform.password.value;
				var p2 = document.myform.password2.value;
				if (p1 != p2) {
					alert("确认密码与密码输入不一致");
					return false;
				} else {
					return true;
				}
			}
			function telCheck() { //验证电话号码
				var usertel = document.myform.tel.value;
				if (usertel == "") {
					alert("未输入电话号码 \n" + "请输入电话号码");
					document.myform.tel.focus();
					return false;
				}
				if (usertel.length !=11 ) {

					alert("电话号码长度错误。\n");
					return false;
				}
				return true;
			}
			function keyizhuce() {
				if (checkUserName() && passCheck() && passCheck2() && telCheck() && checkName() )
					doZhuce(), clearText();
				else

				location.href="doRegister";

				return false;

			}
			function clearText() {
				document.myform.username.value = "";
				document.myform.name.value = "";
				document.myform.password.value = "";
				document.myform.password2.value = "";
				document.myform.tel.value = "";
			}

			function doZhuce(){

				let url="doSaveUser"
				let params={
					username:$("#username").val(),
					name:$("#name").val(),
					password:$("#password").val(),
					gender:$(".gender").val(),
					tel:$("#tel").val(),

				}
				$.post(url,params,function(result){

					if(result.state==1){

						alert("注册成功")
						location.href="doLogin";
					}else{
						alert("注册失败，该用户已存在！！！");
						location.href="doRegister";
					}
					return false;//防止刷新时重复提交
				})
			}

			//返回登录
			function doLogin(){
				location.href=`/doLogin`
			}

		</script>
       
    </body>
</html>